<template>
	<view>
		<cu-custom :bgColor="isGary? 'bg-hb':'bg-'+theme.backgroundColor" :isBack="true" :isContainer="true">
			<block slot="content">{{pageDivData.pageName?pageDivData.pageName:'首页' }}</block>
		</cu-custom>
		<view v-if="!showDefaultAppPage" :style="{backgroundColor:`${pageDivData.pageBackGroundColor}`}">
			<!-- 顶部搜索 -->
			<view class="search_container" :style="{top:CustomBar+'px'}" :class="isGary?'is_gray':''">
				<div-search :newData="searchData" @showPop="showPop"></div-search>
			</view>
			<view class="" style="height:120rpx"></view>
			<!-- 装修模块 -->
			<block v-for="(temp, index) in pageDivData.pageComponent.componentsList" :key="index">
				<!-- 单图 -->
				<template v-if="temp.componentName === 'imageComponent'">
					<view :class="isGary?'is_gray':''">
						<div-image v-model="temp.data"></div-image>
					</view>
				</template>
				<!-- 双图 -->
				<template v-else-if="temp.componentName === 'multipleImage'">
					<view :class="isGary?'is_gray':''">
						<div-image-double v-model="temp.data"></div-image-double>
					</view>
				</template>
				<!-- 三图 -->
				<template v-else-if="temp.componentName === 'imageThreeComponent'">
					<view :class="isGary?'is_gray':''">
						<div-image-three v-model="temp.data"></div-image-three>
					</view>
				</template>
				<!-- 多图 -->
				<template v-else-if="temp.componentName === 'imageRowThreeComponent'">
					<view :class="isGary?'is_gray':''">
						<div-image-row-three v-model="temp.data"></div-image-row-three>
					</view>
				</template>
				<!-- 轮播 -->
				<template v-else-if="temp.componentName === 'swiperComponent'">
					<view :class="isGary?'is_gray':''">
						<div-swiper v-model="temp.data" @showPop="showPop"></div-swiper>
					</view>
				</template>
				<!-- banner -->
				<template v-else-if="temp.componentName === 'navButtonComponent'">
					<view :class="isGary?'is_gray':''">
						<div-nav-button v-model="temp.data"></div-nav-button>
					</view>
				</template>
				<!-- 通知 -->
				<template v-else-if="temp.componentName === 'noticeComponent'">
					<view :class="isGary?'is_gray':''">
						<div-notice v-model="temp.data"></div-notice>
					</view>
				</template>
				<!-- 文字 -->
				<template v-else-if="temp.componentName === 'titleTextComponent'">
					<view :class="isGary?'is_gray':''">
						<div-title-text v-model="temp.data"></div-title-text>
					</view>
				</template>
				<!-- 商品（竖1）-->
				<template v-else-if="temp.componentName === 'goodsComponent'">
					<view :class="isGary?'is_gray':''">
						<div-goods v-model="temp.data" ref="divGoods" @goodsLoading="goodsLoading"></div-goods>
					</view>
				</template>
				<!-- 商品（竖2）-->
				<template v-else-if="temp.componentName === 'goodsColComponent'">
					<view :class="isGary?'is_gray':''">
						<div-goods-col v-model="temp.data"></div-goods-col>
					</view>
				</template>
				<!-- 商品（横） -->
				<template v-else-if="temp.componentName === 'goodsRowComponent'">
					<view :class="isGary?'is_gray':''">
						<div-goods-row v-model="temp.data"></div-goods-row>
					</view>
				</template>
			</block>
			<view class="" style="height: 40rpx;">
				<view :class="'cu-load ' + (loadmore3 == ''? '' : loadmore3 ? 'loading':'over')" :style="{backgroundColor:`${pageDivData.pageBackGroundColor}`}" style="line-height: 40rpx;"></view>				
			</view>
		</view>
		<!-- 如果没有自定义页面就用自带页面 -->
		<view class="bg-gray1" v-if="showDefaultAppPage">
			<view class="text-center margin-top-sm" style="color:red;">暂无内容显示，请联系运营</view>
		</view>
		<login-pop ref="lPop"></login-pop>
	</view>
</template>

<script>
	const app = getApp();
	const util = require("utils/util.js");

	import api from '@/utils/api'
	import __config from "@/config/env";

	import divSearch from "@/components/search-model/search-model.vue";
	import loginPop from '@/components/login-pop/login-pop.vue'

	import divImage from "@/components/div-components/div-image/div-image.vue";
	import divImageDouble from "@/components/div-components/div-image-double/div-image-double.vue"
	import divImageThree from "@/components/div-components/div-image-three/div-image-three.vue";
	import divImageRowThree from "@/components/div-components/div-image-rowThree/div-image-rowThree.vue"
	import divSwiper from "@/components/div-components/div-swiper/div-swiper.vue";
	import divNavButton from "@/components/div-components/div-nav-button/div-nav-button.vue";
	import divTitleText from "@/components/div-components/div-title-text/div-title-text.vue";
	import divGoods from "@/components/div-components/div-goods/div-goods.vue";
	import divGoodsRow from "@/components/div-components/div-goods-row/div-goods-row.vue"
	import divGoodsCol from "@/components/div-components/div-goods-col/div-goods-col.vue"

	export default {
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				CustomBar: this.CustomBar ? this.CustomBar : 48,
				showDefaultAppPage: false, // 判断是否有装修
				// 默认装修数据
				pageDivData: {
					pageComponent: {
						componentsList: []
					}
				},
				loadmore3: true, // 自定义页面的加载状态
				isGary: 0,
				searchData:{}, // 搜索栏样式
			};
		},
		components: {
			divSearch,
			loginPop,
			divImage,
			divImageDouble,
			divImageThree,
			divImageRowThree,
			divSwiper,
			divNavButton,
			divTitleText,
			divGoods,
			divGoodsRow,
			divGoodsCol
		},
		onLoad(options) {
			if (options.login) {
				this.showPop()
			}
		},
		onShow() {
			app.initPage().then(res => {
				this.loadData();
				// 判断首页是否需要置灰
				this.isGary = uni.getStorageSync('home_isGary')
			})
		},
		onReady() {},
		onPullDownRefresh() {
			uni.hideNavigationBarLoading(); // 停止下拉动作
		},
		onReachBottom() {
			if (this.$refs.divGoods && !this.loadmore3) {
				this.loadmore3 = true
				this.$refs.divGoods[0].getGoods()
			}else {
				this.loadmore3 = ''
			}
		},
		methods: {
			loadData() {
				this.loadmore3 = true;
				uni.setStorageSync('clientType', 3);
				api.pagedevise({
					pageType: 1,
					clientType: 6
				}).then(res => {
					if (res.data && res.data.pageComponent && res.data.pageComponent.componentsList &&
						res.data.pageComponent.componentsList.length > 0) {
						this.pageDivData = res.data;
						this.searchData = this.pageDivData.pageComponent.searchDate || {}
						this.showDefaultAppPage = false;
						this.loadmore3 = false;
					} else {
						// 如果没有设置自定义页面数据，那就显示默认原始页面
						this.showDefaultAppPage = true
					}
				});
			},
			showPop() {
				this.$refs.lPop.open()
			},
			goodsLoading(data){
				this.loadmore3 = data
			}
		}
	};
</script>
<style scoped>
	.is_gray {
		filter: grayscale(100%);
	}
</style>
<style>
	.search_container {
		position: fixed;
		top: 200rpx;
		left: 0rpx;
		right: 0;
		z-index: 99;
	}
</style>